<template>
	<view class="seacrh-container">
		<view class="search-head" :style="{ paddingTop: barHeight + 'rpx' }">
			<image src="@/static/img/common/fh.png" mode="" @click="goto"></image>
			<uni-search-bar style="width: 83%;" @focus="isShow = true" @input="changIpt" v-model="searchValue"  class="uni-mt-10" radius="20" :placeholder="plTitle" clearButton="auto" cancelButton="none"/>
			<text @click="search">搜索</text>

		</view>
		<view class="search-title">
			<text>最近搜索</text>
			<image src="@/static/img/common/del.png" mode="" @click="del"></image>
		</view>
		<view class="search-main">
			<view class="main-item"
			 v-for="(item, index) in history"
			 :key="index"
			 @click="jumpHis(item)">{{ item.positionName }}</view>
		</view>
		<view class="search-list" v-if="isShow">
			<view class="list-item"
			 v-for="(item ,index) in searchList"
			 :key="index"
			 @click="jumpItem(item)">{{ item.name }}</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getStatusBarHeight } from '@/utils/common/common.js'
import api from '@/utils/api/recruit.js'
import { showModal, showToast } from '@/utils/toast.js'
onLoad(res => {
	type.value = res.type
	if(res.type === '1'){
		plTitle.value = '搜索职位名称'
	} else {
		plTitle.value = '搜索人才'
	}
	barHeight.value = getStatusBarHeight()
})
onMounted(_ => {
	getHis()
})
const searchList = ref([])
const type = ref(null)  //类型
const isShow = ref(false)
const barHeight = ref(null)	
const searchValue = ref(null)	
const plTitle = ref('搜索职位名称')
const history = ref([
	{ name: '产品经理' },
	{ name: '保洁' },
	{ name: '兼职' },
	{ name: '运营专员' },
	{ name: '安装师傅' },
	{ name: '美工' },
	{ name: '美工' },
])
// 返回
const  goto = _ => uni.navigateBack()
// 搜索
const search = _ => {
	isShow.value = false
	let datas = {
		positionName: searchValue.value,
		types: type.value,
		positionId: idd.value || null
	}
	uni.navigateTo({
		url:`/pages/allTalents/allTalents?data=${ JSON.stringify(datas) }`
	})
}
// 或搜索历史记录
const getHis = async _ =>{
	let data = {
		// positionName: searchValue.value,
		searchType: type.value === 1 ? 'POSITION_SEARCH' : 'RESUME_SEARCH'
	}
	const res = await api.queryResumeRecentSearches(data)
	console.log(res);
	history.value = res.data
}
const idd = ref(null)
// 点击
const jumpItem = item => {
	isShow.value = false
	searchValue.value = item.name
	idd.value = item.id
	search()
}
const changIpt = async e => {
	const res = await api.searchPosition({positionName: e})
	searchList.value = res.data
  idd.value = ''
}
// 
const jumpHis = item =>{
	idd.value = ''
	searchValue.value = item.positionName
	idd.value = item.id
	search()
} 
// 删除
const del = _=> {
	showModal('是否删除全部历史记录', true).then( async res=> {
		if(res.confirm){
			let searchTypes = type.value === '1' ? 'POSITION_SEARCH' : 'RESUME_SEARCH'
			let data = {
				searchType: searchTypes
			}
			const ress = await api.delPositionSearch(data)
			showToast('删除成功')
		}
	})
}
</script>

<style lang="scss">
.seacrh-container{
	width: 100%;
	height: 100vh;
	background: #fff;
	position: relative;
	.search-head{
		padding: 0 24rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		image{
			width: 36rpx;
			height: 36rpx;
		}
		text{
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: normal;
			font-size: 32rpx;
			color: #595959;
			line-height: 48rpx;
			text-align: right;
			font-style: normal;
			text-transform: none;
		}

	}
	.search-title{
		margin-top: 29rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;
		position: relative;
		text{
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: normal;
			font-size: 32rpx;
			color: #262626;
			line-height: 48rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
		image{
			width: 36rpx;
			height: 36rpx;
		}
	}
	.search-main{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		.main-item{
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 10rpx;
			background: #F5F5F5;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			padding: 7rpx 0rpx;
			box-sizing: border-box;
		}
	}
	.search-list{
		// position: absolute;
		// bottom: 10rpx;
		// left: 0;
		width: 100%;
		height: 90vh;
		// height: calc(100% - 200rpx);
		overflow: auto;
		background: #fff;
		z-index: 999;
		padding: 32rpx;
		.list-item{
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: normal;
			font-size: 32rpx;
			color: #262626;
			line-height: 48rpx;
			// text-align: center;
			font-style: normal;
			text-transform: none;
			padding: 10rpx 10rpx;
			&:hover{
				background: #F5F5F5;
			}
		}
	}
}
</style>
